<template>
  <div class="boxs">
    <!-- 面包屑组件 -->
    <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
      <span class="back" @click="goBack()">返回上一页</span>
      <el-breadcrumb-item>
        <!-- <img src="@/assets/userCenter/组132.png" alt="" /> -->
        <i class="el-icon-user-solid"></i>
        <span class="span" style="color: #666"> 用户中心</span>
      </el-breadcrumb-item>
      <el-breadcrumb-item>
        <span class="span" style="color: #666">我的认证</span>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content">
      <div class="f1">
        <div class="title">我的认证</div>
        <div
          @click="download"
          class="anniu"
          v-bind:class="{
            forbidden: !ruleForm.authresult || ruleForm.authresult == '不通过',
          }"
        >
          预览证书
        </div>
      </div>
      <div class="f2">
        <!-- <img
          src="@/assets/userCenter/组136.png"
          alt=""
          v-show="ruleForm.authresult && ruleForm.authresult != '不通过'"
        /> -->
        <div id="title">
          <span>{{ ruleForm.id }}</span>
          <p
            v-show="ruleForm.authresult != null"
            :class="{
              ybrz:
                ruleForm.authresult == '通过' ||
                ruleForm.authresult == '推荐' ||
                ruleForm.authresult == '一般认证',
            }"
          >
            {{ ruleForm.authresult }}
          </p>
        </div>
        <ul>
          <li>
            <p>企业名称：</p>
            <span>{{ ruleForm.entname }}</span>
          </li>
          <li>
            <p>企业认证类型：</p>
            <span>{{
              type == "1"
                ? "外贸企业"
                : type == "2"
                ? "物流服务商"
                : type == "3"
                ? "仓储服务商"
                : type == "4"
                ? "关务服务商"
                : "其他"
            }}</span>
          </li>
        </ul>
        <ul>
          <li>
            <p>申请时间：</p>
            <span>{{ ruleForm.inputdate }}</span>
          </li>
          <li>
            <p>有效期至：</p>
            <span>{{ ruleForm.validto }}</span>
          </li>
        </ul>
      </div>
      <!-- <div class="f3"> -->
      <div class="cut">
        <ul>
          <li @click="native = 1" :class="{ native: native == 1 }">基本信息</li>
          <li @click="native = 2" :class="{ native: native == 2 }">资质信息</li>
          <li @click="native = 3" :class="{ native: native == 3 }">财务信息</li>
          <li @click="native = 4" :class="{ native: native == 4 }">信用信息</li>
        </ul>
      </div>
      <div class="f4">
        <template v-if="native == 1">
          <div class="titles">
            <h6></h6>
            基本信息
          </div>
          <div class="ul_li">
            <!-- 表单 -->
            <el-form
              :model="ruleForm"
              ref="ruleForm"
              label-width="160px"
              class="demo-ruleForm"
            >
              <el-form-item label="企业名称">
                <el-input disabled v-model="ruleForm.entname"></el-input>
              </el-form-item>
              <el-form-item label="统一社会信用代码">
                <el-input disabled v-model="ruleForm.creditno"></el-input>
              </el-form-item>
              <el-form-item label="注册省份">
                <el-input disabled v-model="ruleForm.prov"></el-input>
              </el-form-item>
              <el-form-item label="实缴资本">
                <el-input disabled v-model="ruleForm.realcapital">
                  <span slot="append" style="margin-right: 15px">万元</span>
                  <el-select
                    disabled
                    slot="append"
                    v-model="ruleForm.unit"
                    placeholder="请选择"
                  >
                    <el-option label="人民币" value="人民币"></el-option>
                    <el-option label="美元" value="美元"></el-option>
                    <el-option label="欧元" value="欧元"></el-option>
                    <el-option label="英镑" value="英镑"></el-option>
                    <el-option label="日元" value="日元"></el-option>
                    <el-option label="港币" value="港币"></el-option>
                  </el-select>
                </el-input>
              </el-form-item>
              <el-form-item label="公司介绍">
                <el-input
                  rows="5"
                  disabled
                  type="textarea"
                  v-model="ruleForm.introduction"
                ></el-input>
              </el-form-item>
            </el-form>
            <!-- 营业执照 -->
            <div class="license" style="margin-top: 35px">
              <div class="title" style="width: 140px">营业执照</div>
              <h5
                style="width: 240px; height: 150px; margin-right: 8px"
                v-viewer
                v-if="yyzz"
              >
                <img :src="yyzz" alt="" />
              </h5>
              <h5 class="title" v-else>暂无</h5>
            </div>
            <!-- 企业图标 -->
            <div class="license" style="margin-top: 35px">
              <div class="title" style="width: 140px">企业图标</div>
              <h5
                style="width: 240; height: 150; margin-right: 8px"
                v-viewer
                v-if="qytb"
              >
                <img :src="qytb" alt="" />
              </h5>
              <h5 class="title" v-else>暂无</h5>
            </div>
            <!-- 组织架构图 -->
            <div class="license" style="margin-top: 35px">
              <div class="title" style="width: 140px">组织架构图</div>
              <h5
                style="width: 240px; height: 150px; margin-right: 8px"
                v-viewer
                v-if="zzjgt"
              >
                <img :src="zzjgt" alt="" />
              </h5>
              <h5 class="title" v-else>暂无</h5>
            </div>
            <!--  办公环境照片-->
            <div class="license" style="margin-top: 35px" v-if="bghjzp">
              <div class="title" style="width: 165px">办公环境照</div>
              <h5
                style="
                  width: 100%;
                  margin-right: 8px;
                  display: flex;
                  flex-wrap: wrap;
                "
                v-viewer
                v-if="bghjzp"
              >
                <img
                  v-for="item in bghjzp"
                  :key="item"
                  :src="item"
                  alt=""
                  style="
                    width: 250px;
                    height: 150px;
                    margin-bottom: 8px;
                    margin-right: 15px;
                  "
                />
              </h5>
              <h5 class="title" v-else>暂无</h5>
            </div>
            <!-- 表单 -->
            <el-form
              style="margin-top: 30px"
              :model="ruleForm"
              ref="ruleForm"
              label-width="160px"
              class="demo-ruleForm"
            >
              <el-form-item label="法定代表人姓名">
                <el-input disabled v-model="ruleForm.legalname"></el-input>
              </el-form-item>
              <el-form-item label="法定代表人手机号">
                <el-input disabled v-model="ruleForm.legalphone"></el-input>
              </el-form-item>
              <el-form-item label="法定代表人证件类型">
                <el-radio-group disabled v-model="ruleForm.legalcredentialtype">
                  <el-radio label="身份证"></el-radio>
                  <el-radio label="护照"></el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="法定代表人证件号码">
                <el-input
                  disabled
                  v-model="ruleForm.legalcredentialnumber"
                ></el-input>
              </el-form-item>
            </el-form>
            <!--  证件-->
            <div class="license" style="margin-top: 35px">
              <div class="title" style="width: 140px">证件文件</div>
              <h5 style="height: 150px; margin-right: 8px" v-viewer v-if="frzm">
                <img :src="frzm" alt="" />
                <img :src="frfm" alt="" />
              </h5>
              <h5 class="title" v-else>暂无</h5>
            </div>
          </div>
        </template>
        <template v-if="native == 2">
          <div class="titles">
            <h6></h6>
            资质信息
          </div>
          <div class="ul_li">
            <!-- 表单 -->
            <el-form
              :model="ruleForm"
              ref="ruleForm"
              label-width="160px"
              class="demo-ruleForm"
            >
              <el-form-item label="是否有相关行政许可">
                <el-radio-group disabled v-model="ruleForm.adminlicense">
                  <el-radio label="是" value="true"></el-radio>
                  <el-radio label="否" value="false"></el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item
                label="行政许可名称"
                v-if="ruleForm.adminlicense == '是'"
              >
                <el-input
                  disabled
                  v-model="ruleForm.adminlicensename"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="行政许可决定书文编号"
                v-if="ruleForm.adminlicense == '是'"
              >
                <el-input
                  disabled
                  v-model="ruleForm.adminlicensenumber"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="有效起至"
                v-if="ruleForm.adminlicense == '是'"
              >
                <el-input disabled v-model="ruleForm.effectiveuntil">
                </el-input>
              </el-form-item>
            </el-form>
            <!-- 证书文件-->
            <div
              class="license"
              style="margin-top: 35px; margin-left: 33px"
              v-if="zjwj && ruleForm.adminlicense == '是'"
            >
              <div class="title" style="width: 152px">证书文件</div>
              <h5 style="width: 100%; margin-right: 8px" v-viewer v-if="zjwj">
                <img
                  :src="zjwj"
                  alt=""
                  style="width: 250px; height: 150px; margin-bottom: 8px"
                />
              </h5>
              <h5 class="title" v-else>暂无</h5>
            </div>

            <div class="titles" v-if="zlxx">
              <h6></h6>
              专利信息
            </div>
            <div v-if="zlxx">
              <el-table
                :data="zlxx"
                border
                stripe
                style="850px"
                :header-cell-style="{
                  background: '#F1F5FF',
                  color: '#4D4D4D',
                }"
              >
                <el-table-column
                  prop=""
                  label="序号"
                  min-width="8%"
                  align="center"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.$index + 1 }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="oldfilename"
                  label="文件名称"
                  align="center"
                  min-width="50%"
                >
                </el-table-column>
                <el-table-column
                  label="操作"
                  align="center"
                  class-name="small-padding fixed-width"
                  min-width="10%"
                >
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="text"
                      @click="examine(scope.$index, zlxx)"
                      >查看</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <!-- 商标信息 -->
            <div class="titles" v-if="spxx">
              <h6></h6>
              商标信息
            </div>
            <div v-if="spxx">
              <el-table
                :data="spxx"
                border
                stripe
                style="850px"
                :header-cell-style="{
                  background: '#F1F5FF',
                  color: '#4D4D4D',
                }"
              >
                <el-table-column
                  prop=""
                  label="序号"
                  min-width="8%"
                  align="center"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.$index + 1 }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="oldfilename"
                  label="文件名称"
                  align="center"
                  min-width="50%"
                >
                </el-table-column>
                <el-table-column
                  label="操作"
                  align="center"
                  class-name="small-padding fixed-width"
                  min-width="10%"
                >
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="text"
                      @click="examine(scope.$index, spxx)"
                      >查看</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <!-- 高新技术认证 -->
            <div class="titles" v-if="gxjsrz">
              <h6></h6>
              高新技术认证
            </div>
            <div v-if="gxjsrz">
              <el-table
                :data="gxjsrz"
                border
                stripe
                style="850px"
                :header-cell-style="{
                  background: '#F1F5FF',
                  color: '#4D4D4D',
                }"
              >
                <el-table-column
                  prop=""
                  label="序号"
                  min-width="8%"
                  align="center"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.$index + 1 }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="oldfilename"
                  label="文件名称"
                  align="center"
                  min-width="50%"
                >
                </el-table-column>
                <el-table-column
                  label="操作"
                  align="center"
                  class-name="small-padding fixed-width"
                  min-width="10%"
                >
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="text"
                      @click="examine(scope.$index, gxjsrz)"
                      >查看</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <!-- 体系认证信息 -->
            <div class="titles" v-if="txrzxx">
              <h6></h6>
              体系认证信息
            </div>
            <div v-if="txrzxx">
              <el-table
                :data="txrzxx"
                border
                stripe
                style="850px"
                :header-cell-style="{
                  background: '#F1F5FF',
                  color: '#4D4D4D',
                }"
              >
                <el-table-column
                  prop=""
                  label="序号"
                  min-width="8%"
                  align="center"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.$index + 1 }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="oldfilename"
                  label="文件名称"
                  align="center"
                  min-width="50%"
                >
                </el-table-column>
                <el-table-column
                  label="操作"
                  align="center"
                  class-name="small-padding fixed-width"
                  min-width="10%"
                >
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="text"
                      @click="examine(scope.$index, txrzxx)"
                      >查看</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <!-- 外贸产品认证信息 -->
            <div class="titles" v-if="wmcprzxx">
              <h6></h6>
              外贸产品认证信息
            </div>
            <div v-if="wmcprzxx">
              <el-table
                :data="wmcprzxx"
                border
                stripe
                style="850px"
                :header-cell-style="{
                  background: '#F1F5FF',
                  color: '#4D4D4D',
                }"
              >
                <el-table-column
                  prop=""
                  label="序号"
                  min-width="8%"
                  align="center"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.$index + 1 }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="oldfilename"
                  label="文件名称"
                  align="center"
                  min-width="50%"
                >
                </el-table-column>
                <el-table-column
                  label="操作"
                  align="center"
                  class-name="small-padding fixed-width"
                  min-width="10%"
                >
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="text"
                      @click="examine(scope.$index, wmcprzxx)"
                      >查看</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <!-- 进出口资质信息 -->
            <div class="titles" v-if="jckzzxx">
              <h6></h6>
              进出口资质信息
            </div>
            <div v-if="jckzzxx">
              <el-table
                :data="jckzzxx"
                border
                stripe
                style="850px"
                :header-cell-style="{
                  background: '#F1F5FF',
                  color: '#4D4D4D',
                }"
              >
                <el-table-column
                  prop=""
                  label="序号"
                  min-width="8%"
                  align="center"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.$index + 1 }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="oldfilename"
                  label="文件名称"
                  align="center"
                  min-width="50%"
                >
                </el-table-column>
                <el-table-column
                  label="操作"
                  align="center"
                  class-name="small-padding fixed-width"
                  min-width="10%"
                >
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="text"
                      @click="examine(scope.$index, jckzzxx)"
                      >查看</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <!-- 荣誉信息 -->
            <div class="titles" v-if="ryxx">
              <h6></h6>
              荣誉信息
            </div>
            <div v-if="ryxx">
              <el-table
                :data="ryxx"
                border
                stripe
                style="850px"
                :header-cell-style="{
                  background: '#F1F5FF',
                  color: '#4D4D4D',
                }"
              >
                <el-table-column
                  prop=""
                  label="序号"
                  min-width="8%"
                  align="center"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.$index + 1 }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="oldfilename"
                  label="文件名称"
                  align="center"
                  min-width="50%"
                >
                </el-table-column>
                <el-table-column
                  label="操作"
                  align="center"
                  class-name="small-padding fixed-width"
                  min-width="10%"
                >
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="text"
                      @click="examine(scope.$index, ryxx)"
                      >查看</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </template>
        <template v-if="native == 3">
          <!-- 审计报告或者财务报表 -->
          <div class="titles">
            <h6></h6>
            财务信息
          </div>
          <div>
            <el-table
              :data="sjbg_cwbb"
              border
              stripe
              style="850px"
              :header-cell-style="{
                background: '#F1F5FF',
                color: '#4D4D4D',
              }"
            >
              <el-table-column
                prop=""
                label="序号"
                min-width="8%"
                align="center"
              >
                <template slot-scope="scope">
                  <span>{{ scope.$index + 1 }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="oldfilename"
                label="文件名称"
                align="center"
                min-width="50%"
              >
              </el-table-column>
              <el-table-column
                label="操作"
                align="center"
                class-name="small-padding fixed-width"
                min-width="10%"
              >
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    @click="examine(scope.$index, sjbg_cwbb)"
                    >查看</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </template>
        <template v-if="native == 4">
          <!-- 征信报告 -->
          <div class="titles" v-if="yhzxbg">
            <h6></h6>
            征信报告
          </div>
          <div v-if="yhzxbg">
            <el-table
              :data="yhzxbg"
              border
              stripe
              style="850px"
              :header-cell-style="{
                background: '#F1F5FF',
                color: '#4D4D4D',
              }"
            >
              <el-table-column
                prop=""
                label="序号"
                min-width="8%"
                align="center"
              >
                <template slot-scope="scope">
                  <span>{{ scope.$index + 1 }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="oldfilename"
                label="文件名称"
                align="center"
                min-width="50%"
              >
              </el-table-column>
              <el-table-column
                label="操作"
                align="center"
                class-name="small-padding fixed-width"
                min-width="10%"
              >
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    @click="examine(scope.$index, yhzxbg)"
                    >查看</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="titles">
            <h6></h6>
            守信红名单
          </div>
          <div class="ul_li">
            <!-- 表单 -->
            <el-form
              :model="ruleForm"
              ref="ruleForm"
              label-width="180px"
              class="demo-ruleForm"
            >
              <el-form-item label="是否列入守信红名单">
                <el-radio-group disabled v-model="ruleForm.promisesred">
                  <el-radio label="是" value="true"></el-radio>
                  <el-radio label="否" value="false"></el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>
            <!-- 证明文件 -->
            <div
              class="license"
              style="margin-top: 35px; margin-left: 40px"
              v-if="zmwj && ruleForm.promisesred == '是'"
            >
              <div class="title" style="width: 140px">证明文件</div>
              <h5
                style="width: 250px; height: 150px; margin-right: 8px"
                v-viewer
                v-if="zmwj"
              >
                <img :src="zmwj" alt="" style="width: 100%; height: 100%" />
              </h5>
              <h5 class="title" v-else>暂无</h5>
            </div>
          </div>
          <template v-if="type == 1 || type == 4">
            <div class="titles">
              <h6></h6>
              海关信用认定
            </div>
            <!-- 表单 -->
            <el-form
              :model="ruleForm"
              ref="ruleForm"
              label-width="180px"
              class="demo-ruleForm"
            >
              <el-form-item label="是否有海关信用认证">
                <el-radio-group disabled v-model="ruleForm.customsauth">
                  <el-radio label="是" value="true"></el-radio>
                  <el-radio label="否" value="false"></el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item
                label="海关信用认定等级"
                v-if="ruleForm.customsauth == '是'"
              >
                <el-input
                  disabled
                  v-model="ruleForm.customsauthgrade"
                ></el-input>
              </el-form-item>
            </el-form>
            <!-- 认定证书 -->
            <div
              class="license"
              style="margin-top: 35px; margin-left: 37px"
              v-if="rdzs && ruleForm.customsauth == '是'"
            >
              <div class="title" style="width: 145px">认定证书</div>
              <h5
                style="width: 250px; height: 150px; margin-right: 8px"
                v-viewer
              >
                <img :src="rdzs" alt="" style="width: 100%; height: 100%" />
              </h5>
            </div>
          </template>
        </template>
      </div>
      <!-- </div> -->
    </div>
  </div>
</template>

<script>
import { info, files, download } from "@/api/authentication/index.js";
export default {
  data() {
    return {
      id: "",
      type: "",
      native: 1,
      yyzz: null, // 营业执照
      qytb: null, // 企业图标
      zzjgt: null, // 组织架构图
      bghjzp: null, // 办公环境照片
      frzm: null, // 身份证正面
      frfm: null, // 身份证反面
      zjwj: null, // 证书文件
      zlxx: null, // 专利信息
      spxx: null, // 商标信息
      gxjsrz: null, // 高新技术认证
      txrzxx: null, // 体系认证信息
      wmcprzxx: null, // 外贸产品认证信息
      jckzzxx: null, // 进出口资质信息
      ryxx: null, // 荣誉信息
      sjbg_cwbb: null, // 审计报告或者财务报表
      yhzxbg: null, // 银行征信报告
      zmwj: null, // 证明文件
      rdzs: null, // 认定证书

      ruleForm: {
        entname: "", //企业名称
        creditno: "", //统一信用代码
        prov: "", //注册省份
        realcapital: "", //实缴资本
        introduction: "", //公司介绍
        legalname: "", //法定代表人姓名
        legalphone: "", //法定代表人手机号
        legalcredentialtype: "", //法定代表人证件类型
        legalcredentialnumber: "", //法定代表人证件号码
        adminlicense: "", //是否有相关行政许可
        adminlicensename: "", //行政许可名称
        adminlicensenumber: "", //行政许可决定书文编号
        effectiveuntil: "", //有效起至
        promisesred: "", //是否列入守信红名单
        customsauth: "", //是否有海关信息认证
        customsauthgrade: "", //海关信用认定等级
        inputdate: "", //申请日期
        validto: "", //有效期至
        authresult: "",
      },
    };
  },
  mounted() {
    document.documentElement.scrollTop = 0;
    this.id = this.$route.query.id;
    this.type = this.$route.query.type;
    this.getInfo();
    this.getFiles();
  },
  methods: {
    //返回上一页
    goBack() {
      this.$router.go(-1);
    },
    // 证书预览
    download() {
      let { authresult } = this.ruleForm;
      if (!authresult || authresult == "不通过") return;
      let entrzid = this.id;
      download(entrzid).then((res) => {
        let filepath = res.data.filepath;
        const a = document.createElement("a"); // 动态创建a标签，防止下载大文件时，用户没看到下载提示连续点击
        a.setAttribute("target", "_blank");
        a.href = filepath;
        a.click();
      });
    },
    // 表格查看
    examine(index, data) {
      const a = document.createElement("a"); // 动态创建a标签，防止下载大文件时，用户没看到下载提示连续点击
      a.setAttribute("target", "_blank");
      a.href = data[index].filepath;
      a.click();
    },

    // 获取信息
    getInfo() {
      info(this.id).then((res) => {
        if (res.msg == "操作成功") {
          this.ruleForm = res.data;
          this.ruleForm.realcapital = this.getArea(this.ruleForm.realcapital);
        }
      });
    },
    // 获取文件
    getFiles() {
      files(this.id).then((res) => {
        let bghjzp = [];
        let zlxx = []; //专利信息
        let spxx = []; // 商标信息
        let gxjsrz = []; // 高新技术认证
        let txrzxx = []; // 体系认证信息
        let wmcprzxx = []; // 外贸产品认证信息
        let jckzzxx = []; // 进出口资质信息
        let ryxx = []; // 荣誉信息
        let sjbg_cwbb = []; // 审计报告或者财务报表
        let yhzxbg = []; // 银行征信报告
        if (res.msg == "操作成功") {
          let data = res.data;
          for (let i = 0; i < data.length; i++) {
            if (data[i].objecttype == "YYZZ") {
              this.yyzz = data[i].filepath;
            } else if (data[i].objecttype == "LOGO") {
              this.qytb = data[i].filepath;
            } else if (data[i].objecttype == "ZZJGT") {
              this.zzjgt = data[i].filepath;
            } else if (data[i].objecttype == "BGHJ") {
              bghjzp.push(data[i].filepath);
              this.bghjzp = bghjzp;
            } else if (data[i].objecttype == "SFZZ") {
              this.frzm = data[i].filepath;
            } else if (data[i].objecttype == "SFZF") {
              this.frfm = data[i].filepath;
            } else if (data[i].objecttype == "YWXGXZXKZS") {
              this.zjwj = data[i].filepath;
            } else if (data[i].objecttype == "ZLXX") {
              zlxx.push(data[i]);
              this.zlxx = zlxx;
            } else if (data[i].objecttype == "SBXX") {
              spxx.push(data[i]);
              this.spxx = spxx;
            } else if (data[i].objecttype == "GXJSRZ") {
              gxjsrz.push(data[i]);
              this.gxjsrz = gxjsrz;
            } else if (data[i].objecttype == "TXRZ") {
              txrzxx.push(data[i]);
              this.txrzxx = txrzxx;
            } else if (data[i].objecttype == "WMCPRZ") {
              wmcprzxx.push(data[i]);
              this.wmcprzxx = wmcprzxx;
            } else if (data[i].objecttype == "JCKZZ") {
              jckzzxx.push(data[i]);
              this.jckzzxx = jckzzxx;
            } else if (data[i].objecttype == "RYXX") {
              ryxx.push(data[i]);
              this.ryxx = ryxx;
            } else if (data[i].objecttype == "CWXX") {
              sjbg_cwbb.push(data[i]);
              this.sjbg_cwbb = sjbg_cwbb;
            } else if (data[i].objecttype == "YHZXBG") {
              yhzxbg.push(data[i]);
              this.yhzxbg = yhzxbg;
            } else if (data[i].objecttype == "SXHMD") {
              this.zmwj = data[i].filepath;
            } else if (data[i].objecttype == "HGXXRD") {
              this.rdzs = data[i].filepath;
            }
          }
        }
      });
    },
    // 转化
    getArea(value) {
      value = parseFloat(value);
      if (value == 0) return "-";
      if (!value) return "-";
      // 将数值截取，保留两位小数
      value = value.toFixed(2);
      // 获取整数部分
      const intPart = Math.trunc(value);
      // 整数部分处理，增加,
      const intPartFormat = intPart
        .toString()
        .replace(/(\d)(?=(?:\d{3})+$)/g, "$1,");
      // 预定义小数部分
      let floatPart = ".00";
      // 将数值截取为小数部分和整数部分
      const valueArray = value.toString().split(".");
      if (valueArray.length === 2) {
        // 有小数部分
        floatPart = valueArray[1].toString(); // 取得小数部分
        return intPartFormat + "." + floatPart;
      }
      return intPartFormat + floatPart;
    },
  },
};
</script>

<style lang="scss" scoped>
// * {
//   margin: 0;
//   padding: 0;
// }
h5 {
  margin: 0;
}
.boxs {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  // 返回上一页
  .back {
    cursor: pointer;
    position: absolute;
    right: 5px;
    font-size: 16px;
    color: #3f6ef2;
    text-decoration: underline;
    user-select: none;
  }
  // 面包屑
  .breadcrumb {
    display: flex;
    align-items: center;
    height: 40px;
    font-size: 16px;
    background-color: rgb(242, 244, 247);
    .icon {
      margin: 0 10px 0 4px;
    }
    .span {
      font-size: 16px;
      font-family: Source Han Sans SC;
      font-weight: 400;
      color: #999999;
    }
    img {
      width: 18px;
      height: 18px;
      margin-right: 5px;
    }
  }
  img {
    width: 240px;
    height: 150px;
    margin-right: 20px;
  }
  .content {
    box-sizing: border-box;
    padding: 45px 35px;
    .f1 {
      position: relative;
      width: 100%;
      height: 58px;
      .title {
        font-size: 18px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #000000;
      }
      .anniu {
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        position: absolute;
        right: 30px;
        bottom: 30px;
        width: 100px;
        height: 28px;
        background: #0a7be0;
        border-radius: 4px;
      }
      .forbidden {
        background-color: #dedede;
      }
    }
    .f2 {
      position: relative;
      box-sizing: border-box;
      padding: 30px;
      width: 880px;
      height: 162px;
      background: #f8f8f8;
      box-shadow: 0px 3px 9px 0px rgba(165, 165, 165, 0.25);
      border-radius: 4px;
      margin-bottom: 25px;
      img {
        width: 77px;
        height: 66px;
        right: 15px;
        top: 50px;
        position: absolute;
      }
      #title {
        display: flex;
        align-items: center;
        // justify-content: space-between;
        p {
          width: 66px;
          height: 18px;
          background: #ff6060;
          border-radius: 2px;
          font-size: 14px;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #ffffff;
          text-align: center;
          line-height: 18px;
          margin-left: 8px;
          &.ybrz {
            background-color: #47af5d;
          }
        }
      }

      #title > span {
        font-size: 18px;
        font-family: Source Han Sans SC;
        font-weight: bold;
        color: #000000;
        margin-right: 15px;
      }
      ul {
        display: flex;
        // flex-wrap: wrap;
        list-style: none;
        padding: 0;
        li {
          width: 50%;
          font-size: 16px;
          font-family: Source Han Sans SC;
          font-weight: 500;
          color: #000000;
          p {
            width: 150px;
          }
          span {
            width: 300px;
          }
          height: 25px;
          display: flex;
          margin: 10px 20px 10px 0;
          align-items: center;
        }
      }
    }

    .cut {
      width: 100%;
      height: 40px;
      ul {
        display: flex;
        list-style: none;
        li {
          height: 40px;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100px;
          font-size: 18px;
          font-family: Source Han Sans SC;
          font-weight: 500;
          color: #0a7be0;
          cursor: pointer;
          margin-right: 30px;
          &.native {
            border-bottom: 2px solid #0a7be0;
          }
        }
      }
    }
    .ul_li {
      width: 100%;
      ul {
        // width: 900px;
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        padding: 0;
        li {
          p {
            width: 200px;
          }
          span {
            width: 300px;
          }
          height: 25px;
          display: flex;

          margin: 10px 20px;
          align-items: center;
        }
      }
    }
    .f4 {
      margin-top: 8px;
      height: 585px;
      box-sizing: border-box;
      padding: 20px;
      overflow: auto;
      .titles {
        display: flex;
        align-items: center;
        box-sizing: border-box;
        font-size: 18px;
        font-weight: bold;
        color: #333333;
        margin: 15px 0;
        h6 {
          width: 5px;
          height: 18px;
          background-color: #0a7be0;
          margin-right: 10px;
        }
      }
    }
    .f4::-webkit-scrollbar {
      width: 5px;
      height: 10px;
      background-color: #fff;
    }
    .f4::-webkit-scrollbar-thumb {
      border-radius: 2px;
      background: rgba(10, 123, 224, 0.5);
    }
  }
}
.license {
  display: flex;
  // width: 100%;
  margin-left: 20px;
  .title {
    box-sizing: border-box;
    padding-right: 15px;
    font-size: 14px;
    font-weight: 600;
    color: #333333;
    text-align: right;
    margin: 0 !important;
  }
  .aaa {
    width: 180px;
    font-size: 16px;
    font-family: Source Han Sans SC;
    font-weight: 400;
    color: #999999;
  }
  img {
    width: 250px;
    height: 100%;
  }

  .card {
    width: 216px;
    height: 123px;
    margin-right: 3px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .license-right {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    div {
      width: 100%;
      p {
        font-size: 14px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #999999;
        line-height: 24px;
      }
    }
  }
}
// .titles {
//   font-size: 14px;
//   font-weight: 700;
//   color: #606266;
//   margin: 30px 0 10px 0;
// }
::v-deep .el-select .el-input input {
  width: 100px;
}
::v-deep .el-form-item__label {
  font-size: 14px;
  font-weight: 600;
  color: #333333;
}
::v-deep .el-textarea__inner {
  &::placeholder {
    font-size: 14px;
    font-family: "Microsoft YaHei";
  }
  color: #555;
  font-family: "Microsoft YaHei";
  font-size: 14px !important;
}
::v-deep .el-input__inner {
  &::placeholder {
    font-size: 14px;
    font-family: "Microsoft YaHei";
  }
  color: #555;
  font-family: "Microsoft YaHei";
  font-size: 14px !important;
}
</style>
